<template>
  <div>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
      <span slot="contactType" slot-scope="text">{{ text | contactType }}</span>

      <span slot="status" slot-scope="text">{{ text | askStatus }}</span>
      <span slot="checkMsg" slot-scope="text, record">
        <template>
          <a @click="checkMsg(record)">查看</a>
        </template>
      </span>
      <span slot="contact" slot-scope="text, record">
        <template v-if="record.contactType == 1">
          {{ record.cennectPhone }}
        </template>
        <template v-if="record.contactType == 2">
          {{ record.wechatNumber }}
        </template>
      </span>
    </s-table>
    <UserMsg ref="msgModal"></UserMsg>
  </div>
</template>
<script>
import { askBoxList } from '@/api/box/api'
import { STable } from '../../../components'
import { UserMsg } from '../../../components'
import '@/views/box/util/filter'
const columns = [
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '搭配师',
    dataIndex: 'fashionerName'
  },
  {
    title: '状态',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '联系方式',
    dataIndex: 'contactType',
    align: 'center',
    scopedSlots: { customRender: 'contactType' }
  },
  {
    title: '手机号/微信号',
    dataIndex: 'contact',
    scopedSlots: { customRender: 'contact' }
  },
  {
    title: '用户留言',
    dataIndex: 'checkMsg',
    align: 'center',
    scopedSlots: { customRender: 'checkMsg' }
  },
  {
    title: '服务单编号',
    dataIndex: 'boxSn'
  },
  {
    title: '取消操作人',
    dataIndex: 'canceller'
  },
  {
    title: '取消原因',
    dataIndex: 'cancelReason'
  },
  {
    title: '备注',
    dataIndex: 'remark'
  }
]
export default {
  components: {
    STable,
    UserMsg
  },
  data() {
    this.columns = columns
    return {
      unionId: '',
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => {
        let params = {
          page: parameter,
          requestData: {
            unionId: this.unionId
          }
        }
        return askBoxList(params).then(res => {
          if (res.code == 0) {
            return res
          } else {
            this.$message.warning(res.msg)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  created() {
    this.unionId = this.$route.params.id
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    // 查看留言
    checkMsg(record) {
      this.$refs.msgModal.show(record)
    }
  }
}
</script>
